<template>
    <div class="box">
        <div class="R-register">
            <a href="javascript:;">
                <img v-back src="./img/goBack.png" alt="goBack.png">
            </a>
            注册
            <router-link to="./login" class="R-login">登录</router-link>
        </div>
        <div class="R-main">
            <form action="#" class="R-form" id="form">
                <div class="margin_b">
                    <label>
                        <span>会员名</span>
                        <input type="text" v-model="username" placeholder="请输入手机号或邮箱">
                    </label>
                </div>
                <div class="margin_b">
                    <label>
                        <span>密码</span>
                        <input type="password" v-model="password" placeholder="请输入密码">
                    </label>
                </div>
                <div class="margin_b">
                    <label>
                        <span>确认密码</span>
                        <input type="password" v-model="repassword" placeholder="请再次输入密码">
                    </label>
                </div>
                <div class="v_code">
                    <label>
                        <span>验证码</span>
                        <input type="text" v-model="vcode" placeholder="请输入验证码">
                    </label>
                </div>
                <div class="v_code_img">
                    <a href="#">
                        <img src="./img/verification_code.png" alt="verification_code.png">
                    </a>
                    <div class="text">看不清，换一张？</div>
                </div>
                <div class="agreement">
                    <label>
                        <input type="checkbox" v-model="toggle">
                        <i></i>
                        <span>我已同意并阅读
                            <a href="####">《服务协议》</a>
                        </span>
                    </label>
                </div>
                <div class="R-reg" id="reg" @click="register">注册 </div>
            </form>
        </div>
    </div>
</template>

<script>
export default {
  name: "registerPage",
  data() {
    return {
      username: "",
      password: "",
      repassword: "",
      vcode: "",
      toggle: false
    };
  },
  methods: {
    register() {
      let check = this.dataCheck();
      let url = this.$api + "/register";
      if (check) {
        this.axios
          .post(url, {
            username: this.username,
            password: this.password,
            repassword: this.repassword,
            vcode: this.vcode
          })
          .then(res => {
            if (res.data.status === 1) {
                this.$router.push({path:'/login'})
            }
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    dataCheck() {
      let username = this.username;
      let password = this.password;
      let repassword = this.repassword;
      let vcode = this.vcode;
      let regU = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/;
      let regPwd = /^[\w]{6,18}$/;
      let isUser = regU.test(username);
      let isPwd = regPwd.test(password);
      if (!isUser) {
        console.log("用户名输入有误");
        return false;
      }
      if (!isPwd) {
        console.log("密码输入有误");
        return false;
      }
      if (password !== repassword) {
        console.log("两次输入密码不一致");
        return false;
      }
      if (vcode == "") {
        console.log("请输入验证码");
        return false;
      }
      if (!this.toggle) {
        console.log("请勾选服务协议");
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped lang="less">
@import url("./css/register.less");
</style>